<template>
    <el-container>
        <el-header>
            <cli-title-student></cli-title-student>
        </el-header>
        <el-main style="margin-left: auto">
            <div class="center" v-if="getData">
                <el-row>
                    <el-col span="7">
                        <el-aside>
                            <blog-author :message="this.userId"></blog-author>
                        </el-aside>
                    </el-col>
                    <el-col span="17">
                        <el-card class="contextarea">
                            <el-row>
                                <el-avatar :size="50" :src="circleUrl"></el-avatar>
                            </el-row>
                            <el-row>
                                <div>类别:{{blog[0].blog_type}}</div>
                                <div>标题:{{blog[0].blog_title}}</div>
                            </el-row>
                            <p>内容：{{blog[0].blog_content}}</p>
                            <el-row style="margin-top: 30px">
                                <el-col :span="4">
                                    <el-badge :value="3" :max="99" class="item">
                                        <el-button size="small">点赞</el-button>
                                    </el-badge>
                                </el-col>
                                <el-col :span="4">
                                    <el-badge :value="3" :max="99" class="item">
                                        <el-button size="small">收藏</el-button>
                                    </el-badge>
                                </el-col>
                                <el-col :span="4">
                                    <el-badge :value="3" :max="99" class="item">
                                        <el-button size="small">分享</el-button>
                                    </el-badge>
                                </el-col>
                            </el-row>

                        </el-card>
                        <el-card class="area">
                            <el-input
                                    type="textarea"
                                    :rows="5"
                                    placeholder="请输入评论"
                                    v-model="comment">
                            </el-input>
                            <el-button type="primary" class="sendbutton" @click.native="sendcomment">评论</el-button>
                        </el-card>
                        <div v-for="item in comments" :key="id" class="text item">
                            <el-card class="box-card">
                                <el-row class="middle">
                                    {{item.content}}
                                </el-row>
                                <el-row class="bottom">
                                    <el-col :span="9" class="createtime">
                                        创建时间:{{item.time}}
                                    </el-col>


                                </el-row>

                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <el-footer>
            <page-footer></page-footer>
        </el-footer>
    </el-container>
</template>

<script>
    import CliTitleStudent from "../../../components/base/cliTitleStudent";
    import BlogAuthor from "../../../components/info/blogAuthor";
    import pageFooter from "../../../components/base/pageFooter";
    import POST from "../../../api/POST";
    import Cookies from "js-cookie";

    export default {
        name: "blogcontextpage",
        components: {pageFooter, BlogAuthor, CliTitleStudent},
        methods: {
            sendcomment() {
                let data = {'blog_id': this.blogId, 'account': this.id, 'blog_comment': this.comment};
                POST.writeBlogcomment(data).then(res => {

                });
            }
        },
        data() {
            return {
                blogId: '',
                blog: [],
                comments: [],
                comment: '',
                getData: false,
                id: '',
                info: [],
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            }
        },

        created() {
            this.info = Cookies.get('info');
            this.info = JSON.parse(this.info);
            console.log(this.info);
            this.id = this.info.account;
            console.log(this.id);
            this.blogId = this.$route.params.blogId;
            console.log(this.blogId);
            let data = {'blog_id': this.blogId};
            POST.blogShowList(data).then(res => {
                this.blog = res.content;
                this.getData = true;
            });
            data = {'blog_id': this.blogId};
            POST.showCommentList(data).then(res => {
                this.comments = res.comment_list;
                this.getData = true;
            });
        }
    }
</script>

<style scoped>
    .center {
        width: 1000px;
        margin: 50px auto;
    }

    .contextarea {
        height: 600px;
        width: 600px;
    }

    .area {
        margin-top: 20px;
        width: 600px;
    }

    .sendbutton {
        margin-left: 490px;
        margin-top: 10px;
    }

    .bottom {
        margin-top: 5px;
    }

    .item {
        margin-bottom: 18px;
    }

    .box-card {
        margin-top: 20px;
        width: 600px;
    }
</style>
